<template>
  <div class="process-loan-container">
    <Promised :promise="workTaskPromise">
      <template v-slot:pending>
        <a-skeleton
          :rows="20"
          active
        />
      </template>
      <template v-slot>
        <section>
          <a-modal
            :title="loanModal.title"
            :visible="loanModal.visible"
            :mask-closable="false"
            :keyboard="false"
            :closable="false"
          >
            <template #closeIcon />
            <div class="loading-container">
              <a-icon
                type="loading"
                class="loading-icon"
              />

              <span class="text">Debit limit calculation in progress...</span>
            </div>
            <template #footer />
          </a-modal>
          <!-- <a-modal
            :title="loanModel.title"
            :visible="loanModel.visible"
            :maskClosable="false"
            :keyboard="false"
            :closable="false"
          >
            <p>Automatically return to the home page after {{ timerState.time }}s</p>

            <template #footer>
              <a-button shape="round" type="primary" @click="okGoBack">
                Go back
              </a-button>
            </template>
         </a-modal> -->
          <!-- {{ nodeStatus }} -->

          <!--  -->

          <!-- <LoanFail />
          <LoanSuccess/> -->
          <LoanApplication
            v-if="nodeStatus"
            @loan="loan"
          />
          <LoanSuccess v-else />
        </section>
      </template>
    </Promised>
  </div>
</template>

<script>
import LoanApplication from './Application.vue';
import LoanSuccess from './Success.vue';
import LoanFail from './Fail.vue';
import process from '../mixins/process';
import modal from './modal';

export default {
  components: {
    LoanApplication,
    LoanSuccess,
    LoanFail
  },

  mixins: [process, modal],

  data() {
    return {
      risk: {}
    };
  },

  computed: {
    // 任务id
    tid() {
      return this.$route.params.tid;
    }
  },

  methods: {
    loan(risk) {
      this.workTaskPromise = this.getWorkTaskStatus();
      this.risk = risk;
    }
  }
};

</script>

<style lang="scss" scoped>
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .loading-icon {
    text-align: center;
    color: $theme-color;
    font-size: 60px;
  }
  .text {
    font-size: $font-size-lg;
    margin-top: $margin-lg;
    font-weight: bold;
  }
}

</style>
